<template>
  <div :id="hasPreview ? info._id : `diy_${info._id}`" v-ui-ref="vSetRef" class="w-full h-full flex flex-col">
    <div class="header flex w-full h-full justify-between items-center" style="padding: 0 50px">
      <div>
        <el-cascader
          v-model="cascaderValue"
          :options="optionsList"
          :props="{
            label: 'DEPT_NAME',
            value: 'ID',
            checkStrictly: true,
          }"
          size="large"
          style="width: 400px; color: #000"
          @change="handleChange"
        />
        <el-button size="large" style="margin: 0 0 0 15px; padding: 7px 15px" type="primary" @click="getData">刷新</el-button>
      </div>
      <div class="flex justify-end">
        <div
          v-for="(item, index) in statusList"
          :key="index"
          class="flex items-center justify-center cursor-pointer"
          style="font-size: 19px; width: 150px; height: 40px"
          :style="{
            background: status == item.status ? '#F0F0F0' : '',
          }"
          @click="chooseList(item)"
        >
          <div
            class="point"
            :style="{
              background: statusProps[item.status[0]],
            }"
          ></div>
          <span style="margin: 0 0 0 6px">{{ item.name }}：</span>
          <span
            :style="{
              color: statusProps[item.status[0]],
            }"
          >
            {{ item.count }}
          </span>
        </div>
      </div>
    </div>
    <div class="flex-1 w-full overflow-auto flex flex-wrap content-start" style="padding-bottom: 160px">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="card flex flex-col justify-center items-center cursor-pointer relative"
        style="font-size: 16px; width: calc(100% / 8); margin-top: 30px"
      >
        <div v-if="item.EQU_STATUS != 'equavailable.scrapped'" class="card flex flex-col justify-center items-center cursor-pointer relative">
          <div @click="clickItem(item)" @mouseout="clickbox" @mouseover="over(index)">
            <!-- <el-image :src="item.imageUrl" style="width: 100px; height: 100px; margin: 0 0 10px" /> -->
            <svg
              class="icon"
              height="70"
              p-id="9357"
              style="margin: 0 0 10px"
              t="1691054275907"
              version="1.1"
              viewBox="0 0 1027 1024"
              width="70"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M855.04512 227.32288h-168.96V156.8c0-54.35904-50.44224-98.43712-112.63488-98.43712h-112.64c-61.70624 0-112.64 44.07296-112.64 98.43712v70.51776H179.712c-61.70624 0-112.64 50.44736-112.64 112.64V846.336c0 61.70624 50.44224 112.63488 112.64 112.63488h675.33312c61.70112 0 112.63488-50.44224 112.63488-112.63488V339.95776c0-62.19264-50.44224-112.63488-112.63488-112.63488zM398.61248 147.00544c0-23.01952 32.32256-42.11712 62.68928-42.11712h112.64c30.3616 0 62.68416 19.58912 62.68416 42.11712v79.82592H398.61248V147.00544zM918.2208 846.34112c0 31.33952-31.83616 62.67904-62.68928 62.67904h-675.328c-31.34464 0-62.68928-31.83104-62.68928-62.67904V502.54848h287.96416v62.68416c0 31.33952 25.46688 56.32 56.32 56.32h112.64c31.33952 0 56.32-25.46688 56.32-56.32V502.54848h287.95904l-0.49664 343.79264z m-469.65248-268.86144V383.54432h138.10688v194.42688l-138.10688-0.49152z m469.65248-119.00416h-287.96416V396.27776c0-31.34464-25.46176-56.32-56.31488-56.32h-112.64c-31.34464 0-56.8064 24.97536-56.8064 56.32v62.68416H116.53632V339.95776c0-31.34464 31.83104-62.68416 62.68416-62.68416h675.82464c31.33952 0 62.67904 31.83616 62.67904 62.68416l0.49664 118.51776z"
                :fill="statusProps[item.EQU_STATUS || 'equavailable.normal']"
                p-id="9358"
              />
            </svg>
          </div>
          <div
            :style="{
              color: statusProps[item.EQU_STATUS || 'equavailable.normal'],
            }"
            @click="clickItem(item)"
            @mouseout="clickbox"
            @mouseover="over(index)"
          >
            {{ item.EQU_NAME }}
          </div>
          <div
            v-if="index + 1 == activeIndex"
            class="absolute box_pop"
            :class="{
              left1: (index + 1) % 8 == 1,
              right1: (index + 1) % 8 == 0,
              topJ: true,
              bottomJ: index + 1 < 30 - 8,
              middleJ: (index + 1) % 8 > 1,
            }"
            :style="{
              width: '300px',
              padding: '10px',
              zIndex: 999,
              background: 'rgb(106, 184, 204)',
            }"
          >
            <div class="flex">
              <div style="width: 35%; text-align: right">设备名称：</div>
              {{ item.EQU_NAME }}
            </div>
            <div class="flex">
              <div style="width: 35%; text-align: right">设备编号：</div>
              {{ item.EQU_CODE }}
            </div>
            <div class="flex">
              <div style="width: 35%; text-align: right">设备IP：</div>
              {{ item.IP }}
            </div>
            <div class="flex">
              <div style="width: 35%; text-align: right">位置：</div>
              {{ item.DEPT_NAME }}
            </div>
            <div class="flex">
              <div style="width: 35%; text-align: right">当前状态：</div>
              {{ item.EQU_STATUS_NAME || '正常' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import { processingConstant } from '@/ve/utils/utils'
  import { cloneDeep } from 'lodash'

  export default defineComponent({
    name: 'UiLcsSystemIndexPage',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        activeIndex: -1,
        inter: null,
        cascaderValue: '',
        optionsList: [],
        list: [],
        status: '',
        Alllist: [],
        statusList: [],
        statusProps: {
          none: '#C9C9C9',
          'equavailable.maintainting': '#FFCC01',
          'equavailable.maintain': '#019A61',
          'equavailable.normal': '#019A61',
          'equavailable.repair': '#FF0000',
          'equavailable.repairing': '#FF0000',
          'equavailable.unused': '#888',
        },
      }
    },
    mounted() {
      this.getSelectOption()
      this.handleChange([])
    },
    methods: {
      chooseList(item) {
        this.status = item.status
        this.list = this.Alllist.filter((cur) => item.status.includes(cur.EQU_STATUS))
      },
      getData() {
        this.getSelectOption()
        this.cascaderValue = ''
        this.handleChange([])
      },
      async handlePreview(FILE_SEQ, item) {
        if (!FILE_SEQ) {
          item.imageUrl = ''
          return
        }
        this.fileList = []
        let res = await request({
          // TODO:在LCS的设备状态监控页面,如果这是在托拉拽配置时,这里获取到的是dams-web而不是wcs-web
          url: GFCD('dams', 'domain') + this.$store.getters['user/appCodeUrl'],
          method: 'post',
          data: {
            data: JSON.stringify({ FILE_SEQ, '#OUTPUT_TYPE#': 'base64' }),
            method: 'wcs.file.common.download',
          },
        })
        let row = res.data[0]
        // console.warn(URL.createObjectURL(this.dataURLtoFile(`data:image/${row.FILE_SUFFIX};base64,${row.BASE64_STRING}`)))
        // this.imgObj[FILE_SEQ] = URL.createObjectURL(this.dataURLtoFile(`data:image/${row.FILE_SUFFIX};base64,${row.BASE64_STRING}`))
        // console.warn('this.imgObj', this.imgObj)
        item.imageUrl = URL.createObjectURL(this.dataURLtoFile(`data:image/${row.FILE_SUFFIX};base64,${row.BASE64_STRING}`))
      },
      async getSelectOption() {
        const res = await request({
          url: GFCD('dams', 'domain') + '/wcs/wcs-web',
          method: 'post',
          data: {
            data: JSON.stringify({ '#LIMIT#': 1, '#PAGE_SIZE#': 50, DEPT_TREE: '{}' }),
            // method: this.info.extension.requestSet.value.select.address,
            method: 'wcs.pri.department.tree.query',
          },
        })
        console.log(res.data['wcs.pri.department.tree.query'].data)
        let arr = []
        this.getTree(res.data['wcs.pri.department.tree.query'].data, 0, arr)
        this.optionsList = arr
      },
      async handleChange(e) {
        this.status = ''
        const ids = cloneDeep(e)
        const res = await request({
          url: GFCD('dams', 'domain') + '/wcs/wcs-web',
          method: 'post',
          data: {
            data: JSON.stringify({
              '#LIMIT#': 1,
              '#PAGE_SIZE#': 99999,
              ORG_ID: processingConstant(this, '#ORG_ID#'),
              DEPT_ID: ids.pop(),
            }),
            method: 'wcs.pri.equipment.querytable',
          },
        })
        let arr = [
          {
            status: ['equavailable.normal', 'equavailable.maintain', ''],
            count: 0,
            name: '正常',
          },
          {
            status: ['equavailable.repair', 'equavailable.repairing'],
            count: 0,
            name: '故障',
          },
          {
            status: ['equavailable.maintainting'],
            count: 0,
            name: '保养中',
          },
          {
            status: ['equavailable.unused'],
            count: 0,
            name: '闲置中',
          },
        ]
        this.Alllist = cloneDeep(res.data['wcs.pri.equipment.querytable'].data)
        this.list = cloneDeep(res.data['wcs.pri.equipment.querytable'].data)
        for (let index = 0; index < this.list.length; index++) {
          const element = this.list[index]
          const obj = arr.find((cur) => cur.status.includes(element.EQU_STATUS || 'equavailable.normal'))
          this.handlePreview(element.EQU_ICON, element)
          if (obj) {
            obj.count += 1
          }
          // else {
          //   if (element.EQU_STATUS == 'equavailable.maintain') {
          //     return
          //   }
          //   arr.push({
          //     status: element.EQU_STATUS,
          //     count: 1,
          //     name: element.EQU_STATUS_NAME,
          //   })
          // }
        }
        this.statusList = arr
      },
      getTree(arr, parentId, brr) {
        arr.map((item) => {
          if (item.PARENT_ID == parentId) {
            brr.push(item)
            if (!item.children) {
              item.children = []
            }
            this.getTree(arr, item.ID, item.children)
          }
        })
      },
      clickbox() {
        this.activeIndex = -1
      },
      clickItem(item) {
        this.getInfo.data = {
          formData: { equId: item.EQU_CODE },
        }
        this.onChange()
      },
      over(index) {
        this.activeIndex = index + 1
        this.activeIndex = index + 1
      },
    },
  })
</script>
<style>
  .uiLcsSystemIndexPage {
    width: 100%;
    height: 100%;
  }
</style>
<style scoped>
  .header {
    height: 80px;
    border-bottom: 1px solid #ededed;
  }
  .point {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  .box_pop {
    border-radius: 5px;
    line-height: 25px;
    color: #fff;
  }
  .middleJ::before {
    left: 47%;
  }
  .topJ {
    top: 110%;
  }
  .topJ::before {
    content: '';
    display: block;
    top: -17px;
    position: absolute;
    border: 10px solid;
    border-color: transparent transparent rgb(106, 184, 204) transparent;
  }
  .center1::before {
    left: 47%;
  }
  .left1 {
    left: calc(50% - 50px);
  }
  .left1::before {
    left: 40px;
  }
  .right1 {
    right: calc(50% - 50px);
  }
  .right1::before {
    right: 40px;
  }
</style>
